<template>
  <div class="form">
    <div class="info" v-if="isShowStatus">
      你的 BMI 值: {{ currentData.bmi }}，身体状态：{{ currentData.status }}
    </div>
    <form @submit.prevent="handleSubmit">
      <div>
        <label>
          <span>身高</span>
          <input v-model="formData.height" type="text">
        </label>
      </div>
      <div>
        <label>
          <span>体重</span>
          <input v-model="formData.weight" type="text">
        </label>
      </div>
      <button>提交</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "BMIFormComponent",
  props: {
    currentData: {
      type: Object,
      default: () => ({})
    },
    isShowStatus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // isShowStatus: false,
      formData: {
        height: '',
        weight: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      // this.isShowStatus = true
      // console.log(this.formData)
      this.$emit('emit-bmi', this.formData)
    }
  }
}
</script>

<!--
scoped: 给当前组件的css加了作用域、样式只对当前组件生效
也可以防止其他组件污染此组件

选择器[data-v-xxxxxx] {}
-->
<style scoped>
.form {
  width: 400px;
  height: 300px;
  border: 2px solid #42b983;
}

div {
  background-color: red;
}
</style>